<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="default-styles.css">
    <style type="text/css">
      
      html, body {
        height: 100%;
        width: 100%;
      }
      a#menu svg {
        width: 40px;
        fill: rgb(197, 87, 87);
      }
      nav, main {
        padding: 1em;
        box-sizing: border-box;
      }
      main {
        width: 100%;
        height: 100%;
      }


      /*
       * Off-canvas 布局样式.
       */

      /* 由于我们首先是移动设备，因此默认情况下，抽屉已隐藏. */
      nav {
        width: 300px;
        height: 100%;
        position: absolute;
        /* 该变换将抽屉移出画布. */
        -webkit-transform: translate(-300px, 0);
        transform: translate(-300px, 0);
        /* 我们还可以为抽屉添加动画. */
        transition: transform 0.3s ease;
      }
      nav.open {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }

      /* 如果有足够的空间(>600 px)，我们总是把抽屉打开。*/
      @media (min-width: 600px) {

        /* 我们打开抽屉. */
        nav {
          position:relative;
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
        }

        /* 我们在父服务器上使用 Flexbox. */
        body {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: row nowrap;
          flex-flow: row nowrap;
        }

        main {
          width: auto;
          /* flex-grow 主要内容填充所有可用空间。 */
          flex-grow: 1;
        }
      }

      /* 如果有空间（> 600px），我们保持默认打开的抽屉. */
      @media (min-width: 600px) {
        main > #menu:after {
          content: '如果宽度超过 600px，抽屉就会保持打开状态。';
        }
        main p, nav p {
          text-decoration: line-through;
        }
      }

    </style>
  </head>
  <body>
    <nav id="drawer" class="dark_blue">
      <h2>关闭画布</h2>
      <p>单击抽屉外的区域关闭</p>
    </nav>

    <main class="light_blue">
      <a id="menu">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
        </svg>
      </a>
      <p>单击菜单图标打开抽屉</p>
    </main>

    <script>
      /*
       * 单击菜单图标时打开抽屉.
       */
      var menu = document.querySelector('#menu');
      var main = document.querySelector('main');
      var drawer = document.querySelector('#drawer');

      menu.addEventListener('click', function(e) {
        drawer.classList.toggle('open');
        e.stopPropagation();
      });
      main.addEventListener('click', function() {
        drawer.classList.remove('open');
      });

    </script>